<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>状态测试页</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
<script type="text/javascript" src="bootstrap/js/jquery-3.2.1.min.js"></script>
<style type="text/css">
	html,body{text-align: center;height: 100%;}
	a:hover{text-decoration: none;}
	.page{
		height: 100%;
		width: 100%;
		background-image: url(image/lxi-list-back-1.jpg);
		background-size: cover;
	}
	.pageTitle{
		height:48px;
		background-color: #4A708B;
		line-height: 50px;
		color: white;
		font-size: 20px;
	 	box-shadow: 0px 0px 10px white inset;
	 	-webkit-box-shadow: 0px 0px 10px white inset;
	 	-moz-box-shadow: 0px 0px 10px white inset; 
	 	text-align: center;
	}
	.lxi-detail-page{
		height:calc(100vh - 50px);
		height:-moz-calc(100vh - 50px);
		width:100%;
		overflow-y:auto;
		padding: 0px 12%;
	}
	.pageTitle .title-logo{
		display: inline-block;
		float: left;
		padding-left: 1%;
	}
	.pageTitle .systemTime{
		display: inline-block;
		text-align: right;
		float: right;
		padding-right: 1%;
	}
	.table th{
		font-size:15px;
		text-align: center;
		background-color: #1874CD;
	}
	.table td{
		background-color: #F0F8FF;
	}
	.table caption{
		text-align:center;
		font-size: 20px;
		color: black;
	}
	.row.ucas-row-padding{
	}
	.ucas-flex{
		display: flex;
	}
	.a-btn-1{
		display:inline-block;
		width: 110px;
		height: 35px;
		line-height: 35px;
		font-size: 17px;
		color: #1874CD;
		text-align:center;
		background-color: #CDCDB4;
		border-radius:5px;
		text-decoration: none;
		cursor: pointer;
	}
	.refresh-data-btn{
		display: inline-block;
		margin:0 auto;
		width:250px;
	}
</style>
</head>
<body onload="getSystemInfo()">
	<div class='page'>
		<div class = 'pageTitle'>
			<div class = 'title-logo'><span>北京国科环宇空间技术有限公司</span></div>
			<div class='refresh-data-btn' onselectstart="return false;">
				<a class = 'a-btn-1' onclick="refreshPageData()" >刷新数据</a>
			</div>
			<div class = 'systemTime'>
				<span>系统时间:</span>
				<span id = 'systemTime'>1970-01-01 00:00:00</span>
			</div>
		</div>
		<div class='container lxi-detail-page'>
			<div class = 'row ucas-row-padding'>
				<div class="col-xs-12 col-sm-12">
					<table class="table table-hover" id='sc_lxi'>
					  <caption>Web-Enabled LXI</caption>
					  <thead>
					    <tr>
					      <th class="col-xs-2 col-sm-2">Instrument</th>
					      <th class="col-xs-2 col-sm-2">Serizl Number</th>
					      <th class="col-xs-2 col-sm-2">Description</th>
					      <th class="col-xs-2 col-sm-2">IP Address</th>
					      <th class="col-xs-2 col-sm-2">Ethernet(MAC) Address</th>
					    </tr>
					  </thead>
					  <tbody></tbody>
					</table>
				</div>
				<div class="col-xs-4 col-sm-4">
					<table class="table table-hover" id='sc_can'>
					  <caption>CAN总线</caption>
					  <thead>
					    <tr>
					      <th >路数</th>
					      <th>状态</th>
					    </tr>
					  </thead>
					  <tbody></tbody>
					</table>
				</div>
				<div class="col-xs-4 col-sm-4">
					<table class="table table-hover" id='sc_rs422'>
					  <caption>RS422总线</caption>
					  <thead>
					    <tr>
					      <th>路数</th>
					      <th>状态</th>
					    </tr>
					  </thead>
					  <tbody></tbody>
					</table>
				</div>
				<div class="col-xs-4 col-sm-4">
					<table class="table table-hover" id='sc_rs485'>
					  <caption>RS485总线</caption>
					  <thead>
					    <tr>
					      <th >路数</th>
					      <th>状态</th>
					    </tr>
					  </thead>
					  <tbody></tbody>
					</table>
				</div>
			</div>
			<div class = 'row ucas-row-padding'>
				<div class="col-xs-4 col-sm-4">
					<table class="table table-hover" id='sc_lvds'>
					  <caption>LVDS总线</caption>
					  <thead>
					    <tr>
					      <th>路数</th>
					      <th>状态</th>
					    </tr>
					  </thead>
					  <tbody></tbody>
					</table>
				</div>
				<div class="col-xs-4 col-sm-4">
					<table class="table table-hover" id='sc_rs232'>
					  <caption>RS232总线</caption>
					  <thead>
					    <tr>
					      <th >路数</th>
					      <th>状态</th>
					    </tr>
					  </thead>
					  <tbody></tbody>
					</table>
				</div>
				<div class="col-xs-4 col-sm-4">
					<table class="table table-hover" id='sc_ge'>
					  <caption>网口-千兆网</caption>
					  <thead>
					    <tr>
					      <th>路数</th>
					      <th>状态</th>
					    </tr>
					  </thead>
					  <tbody></tbody>
					</table>
				</div>
			</div>
			<div class = 'row ucas-row-padding'>
				<div class="col-xs-4 col-sm-4">
					<table class="table table-hover" id='sc_10ge'>
					  <caption>网口-万兆网</caption>
					  <thead>
					    <tr>
					      <th >路数</th>
					      <th>状态</th>
					    </tr>
					  </thead>
					  <tbody></tbody>
					</table>
				</div>
				<div class="col-xs-4 col-sm-4">
					<table class="table table-hover" id='1553B'>
					  <caption>1553B总线</caption>
					  <thead>
					    <tr>
					      <th>路数</th>
					      <th>状态</th>
					    </tr>
					  </thead>
					  <tbody></tbody>
					</table>
				</div>
				<div class="col-xs-4 col-sm-4">
					<table class="table table-hover" id='sc_ad'>
					  <caption style="width: 100%; position: relative;" >AD<a class='a-btn-1' style="position:absolute;right:1%;bottom:15%;" onclick="refreshTableData('sc_ad')">刷新列表</a></caption>
					  <thead>
					    <tr>
					      <th >路数</th>
					      <th>状态</th>
					    </tr>
					  </thead>
					  <tbody></tbody>
					</table>
				</div>
			</div>
			<div class = 'row ucas-row-padding'>
				<div class="col-xs-4 col-sm-4">
					<table class="table table-hover" id='sc_da'>
					  <caption style="width: 100%; position: relative;" >DA<a class='a-btn-1' style="position:absolute;right:1%;bottom:15%;" onclick="refreshTableData('sc_da')">刷新列表</a></caption>
					  <thead>
					    <tr>
					      <th>路数</th>
					      <th>状态</th>
					    </tr>
					  </thead>
					  <tbody></tbody>
					</table>
				</div>
				<div class="col-xs-4 col-sm-4">
					<table class="table table-hover" id='sc_oc'>
					  <caption style="width: 100%; position: relative;" >OC<a class='a-btn-1' style="position:absolute;right:1%;bottom:15%;" onclick="refreshTableData('sc_oc')">刷新列表</a></caption>
					  <thead>
					    <tr>
					      <th>通</th>
					      <th>断</th>
					    </tr>
					  </thead>
					  <tbody></tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">
/*<![CDATA[*/
	$(function(){
		var first=self.setInterval("clock()",1000);
		//var second=self.setInterval("getSystemInfo()",2000);
	});
	function clock(){
		var date = new Date();
		var year = date.getFullYear();
		var month = (date.getMonth() + 1)<10?"0"+(date.getMonth() + 1):date.getMonth() + 1;
		var day = date.getDate()<10?"0"+date.getDate():date.getDate();
		var hour = date.getHours()<10?"0"+date.getHours():date.getHours();
		var minute = date.getMinutes()<10?"0"+date.getMinutes():date.getMinutes();
		var second = date.getSeconds()< 10?'0'+date.getSeconds():date.getSeconds();
		var currentTime = year+'-'+month+'-'+day+' '+hour+':'+minute+':'+second;
		document.getElementById("systemTime").innerHTML=currentTime;
    }
	function refreshPageData(){
		getSystemInfo();
	}
	function getSystemInfo(){
		$.ajax({
		   type: "POST",
		   url: "test.do",
		   data: "name=John&location=Boston",
		   success: function(msg){
		     analysisData(msg);
		   }
		});
	}
	function analysisData(data,tableId){
		if(tableId){//如果tableId有值，只刷新单个列表。
			var dataObj = data[tableId];
			analysisTableData(dataObj,tableId);
		}else{//如果没值，刷新所有列表。
			for(var property in data){
				var dataObj = data[property];
				analysisTableData(dataObj,property);
			}
		}
	}
	//解析列表数据，处理需要特殊处理的列表
	function analysisTableData(dataObj,tableId){
		var Nums = dataObj.Nums;
		var statusArray = dataObj.Status;
		if(tableId == 'sc_lxi'){
			$("#"+tableId+"  tr:not(:first)").html(""); 
			var rowTem = '<tr>'
	           + '<td>'+dataObj.instrument+'</td>'
	           + '<td>'+dataObj.serizlNum+'</td>'
	           + '<td>'+dataObj.description+'</td>'
	           + '<td>'+dataObj.ip+'</td>'
	           + '<td>'+dataObj.mac+'</td>'
	           + '</tr>';
		    $("#"+tableId+" tbody").append(rowTem);
		}else if(tableId =='sc_mt' && Nums>0){
			addRow('1553B',Nums,statusArray,'mt-');
		}else if(tableId=='sc_rt' && Nums>0){
			addRow('1553B',Nums,statusArray,'rt-');
		}else{
			addRow(tableId,Nums,statusArray);
		}
	}
	function addRow(tableId,Nums,statusArray,prefix,suffix) {
		$("#"+tableId+"  tr:not(:first)").html(""); 
		for(var i=0;i<Nums;i++){
			var num = i+1;
			var status = statusArray[i];
			if(prefix){
				num = prefix+num;
			}
			if(suffix){
				status = status+suffix;
			}
			var rowTem = '<tr>'
	           + '<td>'+num+'</td>'
	           + '<td>'+status+'</td>'
	           + '</tr>';
		    $("#"+tableId+" tbody").append(rowTem);
		}
       
    }
	function refreshTableData(tableId){
		$("#"+tableId+"  tr:not(:first)").html("");
		$.ajax({
		   type: "POST",
		   url: "test.do",
		   data: "name=John&location=Boston",
		   success: function(msg){
		     analysisData(msg,tableId);
		   }
		});
	}
/*]]>*/
</script>
</html>